<!doctype html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script>
<title>d3比例尺</title>
</head>
<body>
    <script>
        var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
        // 画布周边的空白
        var padding = {
            left: 50,
            right: 20,
            bottom: 20,
            top: 20
        }
        var width = 600;
        var height = 600;
        var jiange = 2;
        var svg = d3.select('body').append('svg')
            .attr('width', width)
            .attr('height', height);
        // 先画出坐标轴
        // x轴
        var xOrdinal = d3.scale.ordinal()
        .domain(d3.range(dataset.length))
        .rangeRoundBands([0, width - padding.left - padding.right]);
        var xAxis = d3.svg.axis().scale(xOrdinal).
        orient('bottom');// axis.orient - 设置或者取得轴的方向。;
        var xLine = svg.append('g')
            .attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')')
            .call(xAxis);
        // y轴
        var yLinear = d3.scale.linear()
        .domain([0, d3.max(dataset)])
        .range([height - padding.top - padding.bottom, 0]);
        var yAxis = d3.svg.axis().scale(yLinear)
        .orient('left');// axis.orient - 设置或者取得轴的方向。;
        svg.append('g')
        .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
        .call(yAxis);
        // 添加矩形
        var rects = svg.selectAll('.rect')
        .data(dataset)
        .enter()
        .append('rect')
        .attr('class', '.rect')
        .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
        .attr('x', function(d, i) {
            return xOrdinal(i) + jiange/2;
        })
        .attr('width', function () {
            return xOrdinal.rangeBand() - jiange/2; // xAxis.rangeBand 获取区间的宽度
        })
        .attr('y', function (d, i) {
            return yLinear(yLinear.domain()[0]);
        })
        .attr('height', function (d, i) {
            return 0;
        })
        .transition()
        .duration(2000).
        ease('linear')
        .attr('y', function (d, i) {
            return yLinear(d);
        })
        .attr('height', function (d, i) {
            return height - padding.top - padding.bottom - yLinear(d)
        });
        // 添加文字
    </script>
</body>
</html>
